import React, { Component } from 'react';
import { Router, Switch, Redirect, Route, NavLink } from 'react-router-dom';
import { loadComponent } from '@ifchange-micro/plugin';
import sdk from '@ifchange-micro/sdk';
import Loading from '@ifchange-eui/loading';
import euiMap from './euiMap';
import camelCase from '@ifchange-core/camel-case';
import style from './style.module.scss';
import './App.css';

const APP_PATH = '/core-component';
const Layout = loadComponent('doc-layout-plugin');

class App extends Component {
    render() {
        return (
            <Router history={sdk.history}>
                <Switch>
                    <Route>
                        <Layout
                            menu={
                                <ul className={style.menu}>
                                    {Object.keys(euiMap).map(name => (
                                        <li key={name}>
                                            <NavLink
                                                className={style['menu-link']}
                                                activeClassName={
                                                    style['active-menu']
                                                }
                                                to={`${APP_PATH}/${name}`}>
                                                {name}
                                            </NavLink>
                                        </li>
                                    ))}
                                </ul>
                            }>
                            <Switch>
                                {Object.keys(euiMap).map(name => (
                                    <Route
                                        key={name}
                                        path={`${APP_PATH}/${name}`}
                                        component={euiMap[name]}
                                    />
                                ))}
                                <Redirect
                                    path={APP_PATH}
                                    to={`${APP_PATH}/${Object.keys(euiMap)[0]}`}
                                />
                            </Switch>
                        </Layout>
                    </Route>
                    <Route
                        render={() => (
                            <Layout>
                                <Loading
                                    className={style.loading}
                                    type="page"
                                />
                            </Layout>
                        )}
                    />
                </Switch>
            </Router>
        );
    }
}

export default App;
